<!-- <template>

    <RegionSelects v-model="region" />

    <RegionText v-model="region1" separator="-" />





    <el-button @click="Add"></el-button>







    <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
            <Plus />
        </el-icon>
    </el-upload>
</template>

<script lang="ts" setup>

import { ref, reactive, watch } from 'vue'
import { RegionText, RegionFullText } from 'v-region'
import type { RegionValues } from 'v-region'
const region = ref<RegionValues>({
    province: undefined,
    city: undefined,
    area: undefined,
})

const region1 = ref<RegionValues>({
    province: undefined,
    city: undefined,
    area: undefined,
})


import { RegionSelects, RegionFullSelects } from 'v-region'

const Add = () => {
    console.log(region.value);

    region1.value = {
        province: region.value.province,
        city: region.value.city,
        area: region.value.area
    }
}

watch(() => region.value, () => {

    console.log(region.value);
    form.value.county = region.value.area
    form.value.market = region.value.city
    form.value.province = region.value.city
    console.log(form.value);

})



import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    console.log(response);

}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

// 改进版 - 添加持久化支持
/* const generateDateBasedNumber = (incrementLength: number = 4) => {
    const now = new Date();
    const datePart = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}`;

    // 从localStorage读取或初始化计数器
    const storageKey = `dateNumCounter_${datePart}`;
    let currentCount = localStorage.getItem(storageKey);

    // 如果localStorage中没有值，则初始化为0
    if (currentCount === null) {
        currentCount = '0';
    }

    // 转换为数字，递增，然后转回字符串
    const numericCount = parseInt(currentCount, 10) + 1;
    currentCount = numericCount.toString();

    // 保存新的计数器值
    localStorage.setItem(storageKey, currentCount);

    // 确保incrementLength是数字，然后生成递增部分
    const incrementPart = currentCount.padStart(incrementLength, '0');

    return datePart + incrementPart;
}; */

const form: any = ref({
    market: "",
    county: "",
    province: "",
})
/* //省份改变时，加载对应城市
const handleProvinceChange = (provinceCode: string) => {
    form.market = ''
    form.county = ''

    const province = regionData.find(item => item.label === provinceCode)
    if (province && province.children) {
        cityList.value = province.children
    }
    else {
        cityList.value = []
    }
}

//城市改变时，加载对应的区县
const handleCityChange = (cityCode: string) => {
    form.county = ''
    const province = regionData.find(item => item.label === form.province)
    if (province) {
        const city = province.children?.find(item => item.label === cityCode)
        if (city?.children) {
            districtList.value = city.children
        }
        else {
            districtList.value = []
            console.warn('当前城市无区县数据')
        }
    }
}
//监听provinceId变化，初始化区县列表
watch(() => form.province, (newVal) => {
    if (newVal) {
        handleProvinceChange(newVal)
    }
})
//监听cityId变化，初始化区县列表
watch(() => form.market, (newVal) => {
    if (newVal) {
        handleCityChange(newVal)
    }
}) */

//省市县全国
import { regionData, codeToText } from 'element-china-area-data';
//省份列表
const provinceList = regionData
//城市列表
const cityList = ref<any[]>([])
//区县列表
const districtList = ref<any[]>([])

</script> -->

<template>
    <el-upload class="avatar-uploader" action="http://localhost:5084/api/Filter" :show-file-list="false"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
            <Plus />
        </el-icon>
    </el-upload>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = response
    console.log(response);

}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}


const generateDateBasedNumber = (incrementLength: number = 4) => {
    const now = new Date();
    const datePart = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}`;

    // 从localStorage读取或初始化计数器
    const storageKey = `dateNumCounter_${datePart}`;
    let currentCount = localStorage.getItem(storageKey);

    // 如果localStorage中没有值，则初始化为0
    if (currentCount === null) {
        currentCount = '0';
    }

    // 转换为数字，递增，然后转回字符串
    const numericCount = parseInt(currentCount, 10) + 1;
    currentCount = numericCount.toString();

    // 保存新的计数器值
    localStorage.setItem(storageKey, currentCount);

    // 确保incrementLength是数字，然后生成递增部分
    const incrementPart = currentCount.padStart(incrementLength, '0');

    return datePart + incrementPart;
}; 
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>